import React, { useEffect, useState, useRef } from 'react'
import { Row, Col, Card, Avatar, List, Drawer } from "antd"
import http from '../../../util/http';
import * as echarts from "echarts"
import _ from "lodash"
import { EditOutlined, EllipsisOutlined, SettingOutlined, CloseCircleOutlined } from '@ant-design/icons';
const { Meta } = Card;
export default function Home(props) {
    const [viewList, setviewList] = useState([])
    const [starList, setStarList] = useState([])
    const pic1 = useRef();
    const pie = useRef();
    const radar = useRef();
    const [open, setOpen] = useState(false)
    const [pieList, setPielist] = useState([])
    useEffect(() => {
        http.get("/news?publishState=2&_expand=category&_sort=view&_order=desc&_limit=10").then(res => {
            // console.log(res.data);
            setviewList(res.data)
        })
    }, [])
    useEffect(() => {
        http.get("/news?publishState=2&_expand=category&_sort=star&_order=desc&_limit=10").then(res => {
            setStarList(res.data)
        })
    }, [])
    // bar
    useEffect(() => {
        http.get(`news?&publishState=2&_expand=category`).then(res => {
            let options = _.groupBy(res.data, (item) => { return item.category.title })
            // console.log(_.groupBy(res.data, (item) => { return item.category.title }))
            renderBar(options)
            setPielist(res.data)
        })
        return () => {
            window.onresize = null;
        }
    }, [])
    const { username, role: { roleName }, region } = JSON.parse(localStorage.getItem("token"));
    // 扇形弹框
    const modal = () => {
        setOpen(true);
        setTimeout(() => {
            renderPie();
            renderRadar();
        }, 0)
    }
    //点击关闭
    const onClose = () => {
        setOpen(false);
    };
    // bar 数据
    const renderBar = (obj) => {
        // 柱状图
        let option1 = {
            title: {
                text: '新闻分类图示'
            },
            tooltip: {},
            grid: {},
            textStyle: {
                fontFamily: "Courier New",
                color: "#333"
            },
            legend: {
                data: ['新闻数量']
            },
            xAxis: {
                data: Object.keys(obj),
                axisLabel: {
                    rotate: "60",
                    interval: 0
                }
            },
            yAxis: {
                minInterval: 1
            },
            series: [
                {
                    name: '新闻数量',
                    type: 'bar',
                    data: Object.values(obj).map(item => item.length),
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ],
            color: ["#FF7F50"],
        };
        let myChart = echarts.init(pic1.current);
        myChart.setOption(option1);
        window.onresize = () => {
            myChart.resize();
        }
    }
    // pie 数据
    const renderPie = () => {
        const currentList = pieList.filter(item => item.author === username)
        const objList = _.groupBy(currentList, (item) => { return (item.category.title) })
        let list = [];
        for (var i in objList) {
            console.log(objList[i])
            list.push({
                name: i,
                value: objList[i].length
            })
        }
        let option3 = {
            title: {
                text: "当前用户新闻分类图示",
                // subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                top: "bottom",
                borderRadius: 5
            },
            series: [
                {
                    name: "发布数量",
                    type: 'pie',
                    radius: '50%',
                    data: list,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        let myChart = echarts.init(pie.current);
        option3 && myChart.setOption(option3);
    }

    const renderRadar = () => {
        const currentList = pieList.filter(item => item.author === username)
        const objList = _.groupBy(currentList, (item) => { return item.category.title })
        let list = [];
        let maxlist = []
        for (var i in objList) {
            console.log(objList[i])
            list.push({
                name: i,
                value: objList[i].length
            })
        }
        for (var i in objList) {
            maxlist.push({
                name: i,
            })
        }
        const option = {
            title: {
                text: '当前用户新闻发布图示',
                left: "center",
                top: "top"
            },
            legend: {
                data: list,
                orient: 'vertical',
                left: 'right',
                top: "middle"
            },
            radar: {
                // shape: 'circle',
                indicator: maxlist,
            },
            series: [
                {
                    name: '发布数量',
                    type: 'radar',
                    data: list
                }
            ]
        };
        var myChart = echarts.init(radar.current);
        option && myChart.setOption(option);
    }
    // 扇形图
    return (
        <div className="site-card-wrapper">
            <Row gutter={24}>
                <Col span={8} style={{ width: '100%' }}>
                    <Card title="用户最常浏览" bordered>
                        <List
                            size="small"
                            dataSource={viewList}
                            renderItem={item => <List.Item> <a href={`/news-manage/preview/${item.id}`}>{item.title}</a></List.Item>}
                        />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card title="用户点赞最多" style={{ width: '100%' }}>
                        <List
                            size="small"
                            dataSource={starList}
                            renderItem={item => <List.Item> <a href={`/news-manage/preview/${item.id}`}>{item.title}</a></List.Item>}
                        />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card
                        style={{ width: "100%" }}
                        cover={
                            <img
                                alt="example"
                                src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                            />
                        }
                        actions={[
                            <SettingOutlined key="setting"
                                onClick={() => modal()}
                            />,
                            <EditOutlined key="edit" />,
                            <EllipsisOutlined key="ellipsis" />,
                        ]}
                    >
                        <Meta
                            avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                            title={username}
                            description={
                                <div>
                                    <b style={{ marginRight: 30 }}>{region ? region : "全球"}</b>
                                    <span>{roleName}</span>
                                </div>
                            }
                        />
                    </Card>
                </Col>
            </Row>
            <Row gutter={16} style={{ marginTop: 20 }}>
                <Col span={24} style={{ width: "100%" }}>
                    <div ref={pic1} style={{ height: "400px" }}></div>
                </Col>
            </Row>
            <Drawer title="个人新闻分类" placement="right" onClose={onClose} open={open}
                closeIcon={<CloseCircleOutlined />}
                width="600px">
                <div ref={pie} style={{ height: "400px", marginBottom: 30 }}></div>
                <div ref={radar} style={{ height: "400px", padding: "10px 0" }}></div>
            </Drawer>
        </div>
    )
}